<template>
  <div class="root-layout">
    <!-- titleBar -->
    <view class="title-layout">我的</view>
    <u-line></u-line>
    <div class="content-layout">
      <!-- 账号信息 -->
      <div class="account-layout">
        <u-avatar
          style="margin-left: 5px"
          :src="userData.imgUrl"
          shape="square"
          size="85"
          :default-url="defaultUrl"
          @click="onAvatarClick"
        ></u-avatar>
        <div class="account-msg-layout">
          <view style="font-size: large">{{ userData.realName }}</view>
          <view style="margin-top: 10px">{{ userData.phone }}</view>
          <view style="margin-top: 5px"
            >常驻城市：{{ userData.residentCity }}</view
          >
        </div>
      </div>
      <u-line></u-line>
      <!-- 菜单 -->
      <view style="height: 20px; width: 100%"></view>
      <u-line></u-line>
      <div class="menu-item-layout" @click="onMuneItemClick(1)">
        <img
          src="@/static/icon_edit.png"
          style="width: 25px; height: 25px"
          alt=""
        />
        <view class="text">修改个人资料</view>
        <u-icon class="right" size="20" name="arrow-right"></u-icon>
      </div>
      <u-line></u-line>
      <div class="menu-item-layout" @click="onMuneItemClick(2)">
        <img
          src="@/static/icon_team.png"
          style="width: 25px; height: 25px"
          alt=""
        />
        <view class="text">我的团队</view>
        <u-icon class="right" size="20" name="arrow-right"></u-icon>
      </div>
      <u-line></u-line>
    </div>
    <!-- 选择头像 -->
    <u-popup
      :show="showSelectWindow"
      :safeAreaInsetTop="true"
      mode="bottom"
      bgColor="transparent"
      @close="showSelectWindow = false"
    >
      <SelectPicWindow
        v-if="showSelectWindow"
        @close="showSelectWindow = false"
        @changeImage="changeImage"
      ></SelectPicWindow>
    </u-popup>
    <!-- 头像详情 -->
    <u-popup
      :show="showPicDetailWindow"
      mode="center"
      bgColor="transparent"
      @close="showPicDetailWindow = false"
    >
      <AvatarDetailWindow
        v-if="showPicDetailWindow"
        :head-url="userData.imgUrl"
        :img-bsn-no="userData.imgBsnNo"
        @close="showPicDetailWindow = false"
        @changeImage="changeImage"
      >
      </AvatarDetailWindow>
    </u-popup>
  </div>
</template>

<script>
import mineApi from "@/api/mine";
import SelectPicWindow from "@/components/windows/SelectPicWindow.vue";
import AvatarDetailWindow from "./components/AvatarDetailWindow.vue";
import { showLoading, hideLoading } from "../../common/js/util";
import passData from "@/api/requstUtil";

export default {
  components: {
    SelectPicWindow,
    AvatarDetailWindow,
  },
  props: {
    isUpdate: Boolean,
  },
  data() {
    return {
      userData: {
        imgUrl: "",
        realName: "",
        phone: "",
        imgBsnNo: "",
        residentCity: "",
      },
      defaultUrl: "@/static/icon_default_head.png",
      showSelectWindow: false,
      showPicDetailWindow: false,
    };
  },
  mounted() {
    this.getMineData();
  },
  methods: {
    // 获取个人信息
    async getMineData() {
      showLoading();
      try {
        const res = await mineApi.postQueryInfoData();
        let data = passData(res);
        if (data) {
          this.userData = { ...data };
        }
      } catch (e) {
        console.log(e);
      }
      hideLoading();
    },
    // 头像点击
    onAvatarClick() {
      if (this.userData.imgUrl) {
        // 有头像
        this.showPicDetailWindow = true;
      } else {
        // 没有头像
        this.showSelectWindow = true;
      }
    },
    // 菜单点击
    onMuneItemClick(type) {
      if (type == 1) {
        uni.navigateTo({
          url: "/pages/mine/UpdateMessage",
          success: (res) => {
            res.eventChannel.emit("acceptMineData", this.userData);
          },
        });
      } else {
        uni.navigateTo({
          url: "/pages/mine/MyTeam",
          success: (res) => {
            res.eventChannel.emit("acceptMineData", this.userData);
          },
        });
      }
    },
    changeImage(data) {
      this.showSelectWindow = false;
      console.log("changeImage", data);
      this.showSelectWindow = false;
      this.showPicDetailWindow = false;
      let param = {
        imgBsnNo: data.imgBsnNo,
        phone: this.userData.phone,
        userId: this.userData.userId,
        realName: this.userData.realName,
        residentCity: this.userData.residentCity,
        updateType: "AVATAR",
      };
      console.log("param", param);
      this.save(param);
    },
    // 保存
    async save(param) {
      try {
        const res = await mineApi.postUpdateData(param);
        let data = passData(res);
        if (data) {
          this.getMineData();
        }
      } catch (e) {
        console.log(e);
      }
    },
  },
  watch: {
    isUpdate() {
      this.getMineData();
    },
  },
};
</script>

<style lang="scss" scoped>
.root-layout {
  width: 100vw;
  position: relative;

  .title-layout {
    font-size: 18px;
    align-items: center;
    justify-content: center;
    display: flex;
    height: 50px;
    font-weight: bold;
    color: black;
    text-align: center;
    background: white;
  }

  .content-layout {
    height: calc(100% - 50px);
    overflow-x: hidden;
    overflow-y: auto;

    .account-layout {
      background: white;
      padding: 15px;
      display: flex;
      flex-direction: row;

      .account-msg-layout {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
      }
    }

    .menu-item-layout {
      width: calc(100% - 20px) !important;
      background: white !important;
      padding: 10px;
      display: flex;
      flex-direction: row;
      height: 40px;
      align-items: center;
      position: relative;

      .text {
        margin-left: 10px;
      }

      .right {
        position: absolute;
        right: 0%;
        margin-right: 10px;
      }
    }
  }
}
</style>
